<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import GlobalHeader from '../components/GlobalHeader.vue'
import GlobalFooter from '../components/GlobalFooter.vue'
import { Layout } from 'ant-design-vue'
import type { MenuItem } from '../components/GlobalHeader.vue'
import { useRoute } from 'vue-router'
import { useLoginUserStore } from '@/stores/loginUser'

const { Header, Content, Footer } = Layout

const loginUserStore = useLoginUserStore()
const route = useRoute()

// 定义所有可能的菜单项
const allMenuItems: MenuItem[] = [
  {
    key: '1',
    title: '首页',
    path: '/'
  },
  {
    key: '2',
    title: '健康检查测试',
    path: '/health'
  },
  {
    key: '3',
    title: '用户管理',
    path: '/admin/userManage'
  },
  {
    key: '4',
    title: '应用管理',
    path: '/admin/appManage'
  },
  {
    key: '5',
    title: '对话管理',
    path: '/admin/chatManage'
  }
]

// 根据用户角色动态计算应显示的菜单项
const menuItems = computed(() => {
  // 如果用户是管理员，显示所有菜单项
  if (loginUserStore.loginUser?.userRole === 'admin') {
    return allMenuItems
  }
  // 否则只显示前两个菜单项（首页）
  return allMenuItems.slice(0, 2)

})

const selectedKeys = ref<string[]>(['1'])

// 根据当前路由设置选中的菜单项
const updateSelectedMenu = () => {
  const path = route.path
  const currentItem = menuItems.value.find(item => item.path === path)
  if (currentItem) {
    selectedKeys.value = [currentItem.key]
  } else {
    // 对于不在菜单中的页面（如登录页），不选中任何菜单项
    selectedKeys.value = []
  }
}

// 监听路由变化
watch(
  () => route.path,
  () => {
    updateSelectedMenu()
  }
)

// 监听菜单项变化
watch(
  () => menuItems.value,
  () => {
    updateSelectedMenu()
  }
)

onMounted(() => {
  updateSelectedMenu()
})
</script>

<template>
  <Layout class="layout-container">
    <Header class="header">
      <GlobalHeader
        :menu-items="menuItems"
        :selected-keys="selectedKeys"
        @update:selected-keys="selectedKeys = $event"
      />
    </Header>
    <Content class="content">
      <router-view />
    </Content>
    <Footer class="footer">
      <GlobalFooter />
    </Footer>
  </Layout>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 统一动画变量 */
:root {
  --animation-duration-fast: 0.2s;
  --animation-duration-normal: 0.3s;
  --animation-duration-slow: 0.5s;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 动画定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes backgroundShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.layout-container {
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 400% 400%;
  background-attachment: fixed;
  animation: backgroundShift 15s ease infinite;
  position: relative;
  overflow-x: hidden;
}

.layout-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.header {
  padding: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 32px rgba(102, 126, 234, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
  animation: slideDown 0.6s var(--animation-easing);
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.header:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 40px rgba(102, 126, 234, 0.2);
  border-bottom-color: rgba(102, 126, 234, 0.2);
}

.content {
  flex: 1;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  background: transparent;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.8s var(--animation-easing) 0.2s both;
}

.footer {
  text-align: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  padding: 24px 0;
  margin-top: auto;
  border-top: 1px solid rgba(102, 126, 234, 0.1);
  box-shadow: 0 -4px 32px rgba(102, 126, 234, 0.1);
  animation: slideUp 0.6s var(--animation-easing) 0.4s both;
  transition: all var(--animation-duration-normal) var(--animation-easing);
  position: relative;
  z-index: 1;
}

.footer:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 -6px 40px rgba(102, 126, 234, 0.15);
  border-top-color: rgba(102, 126, 234, 0.2);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .layout-container {
    background-size: 300% 300%;
  }
}

@media (max-width: 768px) {
  .header {
    box-shadow: 0 2px 16px rgba(102, 126, 234, 0.1);
  }
  
  .footer {
    padding: 16px 0;
    box-shadow: 0 -2px 16px rgba(102, 126, 234, 0.1);
  }
}

@media (max-width: 480px) {
  .layout-container {
    background-size: 200% 200%;
  }
  
  .header,
  .footer {
    backdrop-filter: blur(15px);
  }
}
</style>
